<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>员工查询</title>
 	<link href="../resources/css/ligerui-all.css" rel="stylesheet" type="text/css" /> 
 	<link href="../resources/css/ligerui-icons.css" rel="stylesheet" type="text/css" /> 
	<script src="../resources/js/jquery-1.9.1.min.js" type="text/javascript"></script>
	<script src="../resources/js/ligerui.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="../resources/js/jquery.validate.min.js"></script>
	<script type="text/javascript" src="../resources/js/jquery.metadata.js"></script>
	<script type="text/javascript" src="../resources/js/messages_cn.js"></script>
	<script type="text/javascript" src="../resources/js/form-validate.js"></script>
    <script type="text/javascript">
    	$(function ()
        {
	              window['g'] = $("#isr").ligerGrid({
	                	checkbox: true,
	                    columns: [
	                    { display: '员工编号', name: 'staffNO', width: 100, frozen: true, isSort: false},
	                    { display: '员工姓名', name: 'staffName', width: 100, frozen: true, isSort: false},
	    				{ display: '员工职务', name: 'position', width: 100, isSort: false},
	    				{ display: '性别', name: 'sex', width: 100, isSort: false,
		    				render: function (item)
	    					{
		    					if (item.sex) return '男';
		    					return '女';
	    					} 
    					},
	                    { display: '手机电话', name: 'telephone', width: 100, isSort: false },
	                    { display: '电子邮箱', name: 'email', width: 150, isSort: false },
	    				{ display: '固定电话', name: 'mobile', width: 100, isSort: false },
	    				{ display: 'QQ', name: 'qq', width: 100, isSort: false },
	    				{ display: '住址', name: 'address', width: 250, isSort: false},
	    				{ display: '入职日期', name: 'employDate', width: 100,isSort: false },
	    				{ display: '离职日期', name: 'leaveDate', width: 100, isSort: false },
	    				{ display: '是否有效', name: 'active', width: 100, isSort: false,
	    					render: function (item)
	    					{
		    					if (item.active) return '有效';
		    					return '无效';
	    					} 
    					 },
	    				{ display: '员工备注', name: 'memo', width: 250, isSort: false }
	                    ], //width: 1000,
	                    url : "list",
	                    width: '99.9%',
	                    pageSizeOptions: [3, 5, 7, 10],
	                    rownumbers:true
	                 });

	               
	              $.metadata.setType("attr", "validate");
		          
		          $("#form1").validate({
		         	 errorPlacement: errorPlacement,
		         	 success: mess
		          });

		         	$("#form2").validate({
		         		 errorPlacement: errorPlacement,
			         	 success: mess
			         });
	              
	              $("form").ligerForm();

	                $("#toolBar").ligerToolBar( {
	                    items : [
									{ text: '增加', click: add,icon:'add' },
									{line: true},
									{ text: '修改', click: update,icon:'edit' },
									{line: true},
									{ text: '删除', click: del, icon: 'busy' },
									{line: true},
									{ text: '导入', click: upload, icon: 'back' },
									{line: true},
									{ text: '导出', click: download, icon: 'up' },
									{line: true},
									{ text: '模板下载', click: template, icon: 'attibutes' }
								]
						
	                });


	          
	                
			$("#Button1").click(function() {
				var param = $("#form0").serialize(); 
				var url = "list?" + param;
				$.post(url, 
						{'page':1, 'pagesize': 10}
				  , function(data){
						g.loadData(data);
						g.setOptions({'url': url, 'pageSizeOptions': [3, 5, 7, 10], 'page':1, 'pagesize': 10} );
					 });
				});
        });

        
        var add = function() {
        	$.get("/baohua/role/list", function(data){
        		$("#add_roles").html("");
        		  $(data).each(function(i) {
        			  $("<input type='checkbox' name='add_roles' value='"+ data[i].roleId +"'/>&nbsp;<label>"+ data[i].roleName +"</label>").appendTo($("#add_roles"));
            		});
        		}); 
        	$.ligerDialog.open({ target: $("#add"), width: 650, title: '增加员工信息' });

            };

        var update = function() {
        	 var s = g.getSelectedRows();
        	 if(s.length > 1) {
        		 $.ligerDialog.warn('修改信息不允许多选!');
             }else if(s.length == 0) {
            	 $.ligerDialog.warn('请选择一条记录!');
             }else{
                 $("#update_staffId").val(s[0].staffId);
                 $("#update_staffNO").val(s[0].staffNO);
                 $("#update_staffName").val(s[0].staffName);
                 $("#update_position").val(s[0].position);
                 if(s[0].sex) {
                	 $("#update_sex").html("<input type='radio' name='sex' value='1' checked='checked'/><label>男</label> <input type='radio' name='sex' value='0'/><label >女</label>");
                     }else {
                     $("#update_sex").html("<input type='radio' name='sex' value='1'/><label>男</label> <input type='radio' name='sex' value='0'  checked='checked'/><label >女</label>");
                     }
                 if(s[0].active) {
                	 $("#update_active").html("<input type='radio' name='active' value='1' checked='checked'/><label>是</label> <input type='radio' name='active' value='0'/><label>否</label>");
                     }else {
                      $("#update_active").html("<input type='radio' name='active' value='1' /><label>是</label> <input type='radio' name='active' value='0' checked='checked'/><label>否</label>");
                     }
                 
                 //由于Roles没有JSON化，所以s[0]中没有roles的值,所以只能通过异步的方式进行加载
                 $.get('/baohua/staff/getRoles/'+ s[0].staffId, function(data){
            	  $("#update_roles").html("");
        		  $(data.roles).each(function(i) {
        			  $("<input type='checkbox' name='update_roles' value='"+ data.roles[i].roleId +"'/>&nbsp;<label>"+ data.roles[i].roleName +"</label>").appendTo($("#update_roles"));
            		});
        		  $(data.roleIds).each(function(j) {
                   	$("#form2 input[name='update_roles'][value='"+data.roleIds[j]+"']").prop('checked', true);
                   });
        		}); 
                 $("#update_telephone").val(s[0].telephone);
                 $("#update_mobile").val(s[0].mobile);
                 $("#update_qq").val(s[0].qq);
                 $("#update_password").val(s[0].password);
                 $("#update_employDate").val(s[0].employDate);
                 $("#update_leaveDate").val(s[0].leaveDate);
                 $("#update_email").val(s[0].email);
                 $("#update_address").val(s[0].address);
                 $("#update_memo").val(s[0].memo);
                 $("#update_leaveDate").val(s[0].leaveDate);
        		$.ligerDialog.open({ target: $("#update"), width: 650, title: '修改员工信息' });
             };

           };

        var del = function() {
        	var s = g.getSelectedRows();
        	if(s.length!=0) {
        	$.ligerDialog.confirm('您真的要删除所选择的信息吗?', function (yes) { 
	              if(yes) {
	        	   var p = new Array();
	        	   for(var i=0; i<s.length; i++) {
	            	   p.push(s[i].staffId);
	               }
	        	   var arrs = JSON.stringify(p);
	        		$.get("/baohua/staff/del/" + arrs, function(data){
	            		var mess = eval(data);
	            		  switch (mess)
	                      {
	                          case "success":
	                        	  g.loadData(); 
	                              $.ligerDialog.success('删除成功！');
	                              break;
	                          case "systemerror":
	                              $.ligerDialog.warn('系统出现错误！');
	                              break;
	                          case "error":
	                              $.ligerDialog.error('员工不存在, 不能删除！');
	                              break;
	                      }
	            	}); 
	            	}
        	});
        	}else {
        		$.ligerDialog.warn('请选择一条记录!');
             }
           };

           var upload = function() {
               alert("ddd");
           }

           var download = function() {
        	   var s = g.getSelectedRows();
        	   var arrs = new Array();
        	   $(s).each(function(i){
            	   arrs.push(s[i].staffNO);
               });
               var param = arrs.join(",");
               $("#param").val(param);
               $("#form3").submit();
           }

           var template = function() {
              window.location.href = "export";
           }
    </script>
    <style type="text/css">
		#isr #toolBar { margin-left:5px;}
        .l-table-edit-td{ padding:3px;}
        .l-button-submit,.l-button-reset{width:80px; float:left; margin-left:10px; padding-bottom:2px;}
        .l-verify-tip{ left:230px; top:120px;}
</style>
</head>

<body>
 <!-- 1.导航条 -->
   <span style=" margin: 5px 10px; display: block; font-weight: bold;">宝华茶餐厅 > 员工管理 > 员工查询</span>
 <!-- 2.查询条件 --> 
   <div id="isearch" style="width:100%; margin-bottom: 5px;">
	  <form name="form0" method="post"  id="form0">
        <table cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td align="right" class="l-table-edit-td" width="11%">员工编号:</td>
                <td align="left" class="l-table-edit-td" style="width:23px">
                   <input name="staffNO" type="text" ltype="text" id="i_staffNO"/>
                </td>
                
                <td align="right" class="l-table-edit-td" width="10%">员工姓名:</td>
                <td align="left" class="l-table-edit-td" style="width:23px"><input name="staffName" type="text" ltype="text" id="i_staffName"/></td>
                
                 <td align="right" class="l-table-edit-td" width="10%">员工职务:</td>
                 <td align="left" class="l-table-edit-td" style="width:23%"><input name="position" type="text" ltype="text" id="i_position"/></td>
            </tr>
           
             <tr>
                <td align="right" class="l-table-edit-td" width="100px">部门:</td>
                <td align="left" class="l-table-edit-td" style="width:160px">
                <select name="deptId" ltype="select" id="i_deptId">
                    <option value="0"> </option>
					<option value="1">主席</option>
					<option value="2">研发中心</option>
					<option value="3">销售部</option>
					<option value="4">市场部</option>
					<option value="5">顾问组</option>
				</select>
                </td>
                
                 <td align="right" class="l-table-edit-td" width="100px">是否有效:</td>
                <td align="left" class="l-table-edit-td" style="width:160px">
                   <select name="i_active"  ltype="select" id="i_active">
	                    <option value=""> </option>
						<option value="1">是</option>
						<option value="0">否</option>
					</select>
                </td>
                
                 <td align="right" class="l-table-edit-td" width="100px">性别:</td>
                <td align="left" class="l-table-edit-td" style="width:160px">
                   <select name="i_sex"  ltype="select" id="i_sex">
	                    <option value=""> </option>
						<option value="1">男</option>
						<option value="0">女</option>
					</select>
                </td>
                
            </tr>
            <tr>
                <td align="right" class="l-table-edit-td" width="100px">入职日期:</td>
                <td align="left" class="l-table-edit-td" style="width:160px">
                    <input name="pre_employDate" type="text" ltype="date" id="pre_employDate"/>至
                    <input name="af_employDate" type="text" ltype="date" id="af_employDate"/>
                </td>
                
                <td align="right" class="l-table-edit-td" width="100px">离职日期:</td>
                <td align="left" class="l-table-edit-td" style="width:160px">
                    <input name="pre_leaveDate" type="text" ltype="date" id="pre_leaveDate"/>至
                    <input name="af_leaveDate" type="text" ltype="date" id="af_leaveDate"/>
                </td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
             <tr>
                 <td colspan="5">&nbsp;</td>
                 <td>
	                 <input type="button" value="查询" id="Button1" class="l-button l-button-submit" /> 
		             <input type="reset" value="重置" class="l-button l-button-reset"/>
		         </td>
            </tr>
        </table>
    </form>
    </div>
 <!-- 3.g工具条 -->  
    <div id="toolBar"></div>
 <!-- 4.员工列表 -->   
	<div id="isr"></div>
 <!-- 5.员工增加信息(弹框) -->	
	<div id="add" style="width:600px; margin:3px; display:none;">
     	<form name="form1" method="post"  id="form1" action="add">
        <table cellpadding="0" cellspacing="0" width="600px">
            <tr>
                <td align="right" class="l-table-edit-td" width="100px">员工编号:</td>
                <td align="left" class="l-table-edit-td" style="width:160px"><input name="staffNO" type="text" ltype="text" id="add_staffNO" validate="{required:true,minlength:3,maxlength:20}"/></td>
                <td align="left" width="40px"></td>
                
                <td align="right" class="l-table-edit-td" width="100">员工姓名:</td>
                <td align="left" class="l-table-edit-td" style="width:160px"><input name="staffName" type="text" ltype="text"  id="add_staffName" validate="{required:true,minlength:3,maxlength:10}"/></td>
                <td align="left" width="40px"></td>
            </tr>
           
            <tr>
                <td align="right" class="l-table-edit-td" valign="top" width="100px">性别:</td>
                <td align="left" class="l-table-edit-td" style="width:160px">
                    <input type="radio" name="sex" value="1" checked="checked"/><label>男</label> <input type="radio" name="sex" value="0" /><label>女</label>
                </td><td align="left" width="40px"></td>
                
                <td align="right" class="l-table-edit-td" width="100px">初始密码:</td>
                <td align="left" class="l-table-edit-td" style="width:160px"><input name="password" type="text" value="123" ltype="text" readonly="readonly"/></td>
                <td align="left" width="40px"></td>
            </tr>   
             <tr>
                <td align="right" class="l-table-edit-td" width="100px">员工职务:</td>
                <td align="left" class="l-table-edit-td" style="width:160px"><input name="position" type="text" ltype="text"/></td>
                <td align="left" width="40px"></td>
                
                <td align="right" class="l-table-edit-td" width="100px">部门:</td>
                <td align="left" class="l-table-edit-td" style="width:160px">
                <select name="deptId" ltype="select" id="add_deptId">
					<option value="1">主席</option>
					<option value="2">研发中心</option>
					<option value="3">销售部</option>
					<option value="4">市场部</option>
					<option value="5">顾问组</option>
				</select>
                </td>
                <td align="left" width="40px"></td>
            </tr>
            <tr>
                <td align="right" class="l-table-edit-td" width="100px">手机号码:</td>
                <td align="left" class="l-table-edit-td" style="width:160px"><input name="telephone" id="add_telephone" type="text" ltype="text" validate="{istelephone:true}"/></td>
                <td align="left" width="40px"></td>
                
                <td align="right" class="l-table-edit-td" width="100px">固定电话:</td>
                <td align="left" class="l-table-edit-td" style="width:160px"><input name="mobile" type="text" id="add_mobile" ltype="text" /validate="{ismobile:true}"></td>
                <td align="left" width="40px"></td>
            </tr>
            <tr>
                <td align="right" class="l-table-edit-td" width="100px">QQ:</td>
                <td align="left" class="l-table-edit-td" style="width:160px"><input name="qq" type="text" ltype="text" id="add_qq" validate="{required:true,number:true}"/></td>
                <td align="left" width="40px"></td>
                
                 <td align="right" class="l-table-edit-td" width="100px">入职日期:</td>
                <td align="left" class="l-table-edit-td" style="width:160px">
                    <input name="add_employDate" type="text" ltype="date" id="add_employDate" validate="{required:true}"/>
                </td>
                <td align="left" width="40px"></td>
            </tr>
            <tr>
               <td align="right" class="l-table-edit-td" valign="top" width="100px">电子邮箱:</td>
                <td align="left" class="l-table-edit-td" style="width:160px">
                   <input name="email" type="text" ltype="text"  id="add_email" validate="{required:true,email:true}"/>
                </td>
                <td align="left" width="40px"></td>
                
                 <td align="right" class="l-table-edit-td" valign="top" width="100px">是否有效:</td>
                <td align="left" class="l-table-edit-td" style="width:160px">
                    <input name="active" type="radio"  value="1" checked="checked"/><label>是</label> <input type="radio" name="active" value="0" /><label>否</label>
                </td>
                <td align="left" width="40px"></td>
            </tr>
            
            <tr>
                <td align="right" class="l-table-edit-td" valign="top" width="100px">角色:</td>
                <td align="left" class="l-table-edit-td"  colspan="4" width="460px" id="add_roles">
                </td>
                <td align="left" width="40px"></td>
            </tr> 
            
              <tr>
                <td align="right" class="l-table-edit-td" width="100px">住址:</td>
                <td align="left" class="l-table-edit-td"  colspan="4" width="460px">
                	<textarea cols="20" rows="1" class="l-textarea" style="width:460px" name="address"></textarea>
                </td>
                <td align="left" width="40px"></td>
            </tr> 
                 
            <tr>
                <td align="right" class="l-table-edit-td" width="100px">备注:</td>
                <td align="left" class="l-table-edit-td" colspan="4"> 
                <textarea cols="100" rows="4" class="l-textarea" style="width:460px" name="memo"></textarea>
                </td>
                <td align="left" width="40px"></td>
            </tr>
            
            <tr>
               <td colspan="4">&nbsp;</td>
               <td align="right">
                  <input type="submit" value="提交" id="Button1" class="l-button l-button-submit" /> 
				  <input type="reset" value="重置" class="l-button l-button-reset"/>
               </td>
                <td align="left" width="40px"></td>
            </tr>
        </table>
    </form>
    </div>
 <!-- 员工修改信息(弹框) -->   
    <div id="update" style="width:600px; margin:3px; display:none;">
     	<form name="form2" method="post"  id="form2" action="update">
        <table cellpadding="0" cellspacing="0" width="600px">
            <tr>
                <td align="right" class="l-table-edit-td" width="100px">员工编号:</td>
                <td align="left" class="l-table-edit-td" style="width:160px">
                   <input name="staffNO" type="text" ltype="text" id="update_staffNO" validate="{required:true,minlength:3,maxlength:20}"/>
                   <input name="staffId" type="hidden" ltype="text" id="update_staffId"/>
                   <input name="password" type="hidden" ltype="text" id="update_password"/>
                </td>
                <td align="left" width="40px"></td>
                
                <td align="right" class="l-table-edit-td" width="100">员工姓名:</td>
                <td align="left" class="l-table-edit-td" style="width:160px"><input name="staffName" type="text" ltype="text" id="update_staffName" validate="{required:true,minlength:3,maxlength:10}"/></td>
                <td align="left" width="40px"></td>
            </tr>
           
            <tr>
                <td align="right" class="l-table-edit-td" valign="top" width="100px">性别:</td>
                <td align="left" class="l-table-edit-td" style="width:160px" id="update_sex">
                </td><td align="left" width="40px"></td>
                
                <td align="right" class="l-table-edit-td" width="100px">是否初始密码:</td>
                <td align="left" class="l-table-edit-td" style="width:160px">
                	<input type="radio" name="ispassword" value="1" id="ispassword"/><label>是</label> <input type="radio" name="ispassword" value="0" checked="checked"/><label >否</label>&nbsp;&nbsp;<span style="color:red;">(初始化密码为123)</span>
                </td>
                <td align="left" width="40px"></td>
            </tr>   
             <tr>
                <td align="right" class="l-table-edit-td" width="100px">员工职务:</td>
                <td align="left" class="l-table-edit-td" style="width:160px"><input name="position" type="text" ltype="text" id="update_position"/></td>
                <td align="left" width="40px"></td>
                
                <td align="right" class="l-table-edit-td" width="100px">部门:</td>
                <td align="left" class="l-table-edit-td" style="width:160px">
                <select name="deptId" ltype="select" id="update_deptId">
					<option value="1">主席</option>
					<option value="2">研发中心</option>
					<option value="3">销售部</option>
					<option value="4">市场部</option>
					<option value="5">顾问组</option>
				</select>
                </td>
                <td align="left" width="40px"></td>
            </tr>
            <tr>
                <td align="right" class="l-table-edit-td" width="100px">手机号码:</td>
                <td align="left" class="l-table-edit-td" style="width:160px"><input name="telephone" id="update_telephone" type="text" ltype="text" id="update_telephone" validate="{istelephone:true}"/></td>
                <td align="left" width="40px"></td>
                
                <td align="right" class="l-table-edit-td" width="100px">固定电话:</td>
                <td align="left" class="l-table-edit-td" style="width:160px"><input name="mobile" type="text" ltype="text" id="update_mobile" validate="{ismobile:true}"/></td>
                <td align="left" width="40px"></td>
            </tr>
            <tr>
                <td align="right" class="l-table-edit-td" width="100px">QQ:</td>
                <td align="left" class="l-table-edit-td" style="width:160px"><input name="qq" type="text" ltype="text" id="update_qq" validate="{required:true,number:true}"/></td>
                <td align="left" width="40px"></td>
                
                 <td align="right" class="l-table-edit-td" width="100px">入职日期:</td>
                <td align="left" class="l-table-edit-td" style="width:160px">
                    <input name="update_employDate" type="text" ltype="date" id="update_employDate"/>
                </td>
                <td align="left" width="40px"></td>
            </tr>
            <tr>
                <td align="right" class="l-table-edit-td" width="100px">离职日期:</td>
                <td align="left" class="l-table-edit-td" style="width:160px">
                    <input name="update_leaveDate" type="text" ltype="date" id="update_leaveDate"/>
                </td>
                <td align="left" width="40px"></td>
                
                <td align="right" class="l-table-edit-td" valign="top" width="100px">电子邮箱:</td>
                <td align="left" class="l-table-edit-td" style="width:160px">
                   <input name="email" type="text" ltype="text" id="update_email" validate="{required:true,email:true}"/>
                </td>
                <td align="left" width="40px"></td>
            </tr>
            
             <tr>
                
                 <td align="right" class="l-table-edit-td" valign="top" width="100px">是否有效:</td>
                <td align="left" class="l-table-edit-td" style="width:160px" id="update_active">
                </td>
                <td align="left" width="40px"></td>
                
                <td>&nbsp;</td>
                 <td>&nbsp;</td>
                  <td>&nbsp;</td>
            </tr>
            
            <tr>
                <td align="right" class="l-table-edit-td" valign="top" width="100px">角色:</td>
                <td align="left" class="l-table-edit-td"  colspan="4" width="460px" id="update_roles">
                </td>
                <td align="left" width="40px"></td>
            </tr> 
            
              <tr>
                <td align="right" class="l-table-edit-td" width="100px">住址:</td>
                <td align="left" class="l-table-edit-td"  colspan="4" width="460px">
                	<textarea cols="20" rows="1" class="l-textarea" style="width:460px" name="address" id="update_address"></textarea>
                </td>
                <td align="left" width="40px"></td>
            </tr> 
                 
            <tr>
                <td align="right" class="l-table-edit-td" width="100px">备注:</td>
                <td align="left" class="l-table-edit-td" colspan="4"> 
                <textarea cols="100" rows="4" class="l-textarea" style="width:460px" name="memo" id="update_memo"></textarea>
                </td>
                <td align="left" width="40px"></td>
            </tr>
            
             <tr>
               <td colspan="4">&nbsp;</td>
               <td align="right">
                  <input type="submit" value="提交" id="Button1" class="l-button l-button-submit" /> 
				  <input type="reset" value="重置" class="l-button l-button-reset"/>
               </td>
                <td align="left" width="40px"></td>
            </tr>
        </table>
    </form>
    <form action="export" method="post" id="form3">
       <input type="hidden" name="param" id="param"/>
    </form>
    </div>
</body>

</html>